import React, { Suspense, lazy } from "react";
import { Route, useRoutes } from "react-router-dom";
import Layout from "../components/layout";
import { WapHomeO, CartCircle, UserO, LabelO } from "@react-vant/icons";
const Home = lazy(() => import("../views/home"));
const Login = lazy(() => import("../views/login"));
const Detail = lazy(() => import("../views/detail"));
const Cart = lazy(() => import("../views/cart"));
const CollectList = lazy(() => import("../views/collectList"));
const Search = lazy(() => import("../views/search"));
const My = lazy(() => import("../views/my"));
const Classify = lazy(() => import("../views/classify"));
const BrowerList = lazy(() => import('../views/browerList'))
const AddressList = lazy(() => import('../views/addressList'))
export const tabbarRouter = [
  {
    path: "/",
    element: (
      <Layout>
        <Home></Home>
      </Layout>
    ),
    meta: {
      title: "首页",
      icon: <WapHomeO />,
    },
  },
  {
    path: "/classify",
    element: <Layout><Classify></Classify></Layout>,
    meta: {
      title: "分类",
      icon: <LabelO  />
    },
  },
  {
    path: "/cart",
    element: (
      <Layout>
        <Cart></Cart>
      </Layout>
    ),
    meta: {
      title: "购物车",
      icon: <CartCircle  />
    },
  },
  {
    path: "/my",
    element: <Layout><My></My></Layout>,
    meta: {
      title: "我的",
      icon: <UserO  />
    },
  },
 
];
const routes = [
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/search",
    element: <Search></Search>,
  },
  {
    path: "/collect/list",
    element: <CollectList></CollectList>,
  },
  {
    path: "/brower/list",
    element: <BrowerList></BrowerList>,
  },
  {
    path: "/address/list",
    element: <AddressList></AddressList>,
  },
].concat(tabbarRouter);
const RouterView = () => useRoutes(routes);

const Router = () => {
  return (
    <Suspense>
      <RouterView></RouterView>
    </Suspense>
  );
};

export default Router;
